<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="head-box">
          <div class="head-title">
            上海浦东国际机场航空油料有限责任公司检验计量中心
          </div>
          <svg-icon icon-class="head" class="head-bar"></svg-icon>
          <div class="time-box">
            <div>{{ date }} {{ week }}</div>
            <div>{{ time }}</div>
          </div>
        </div>
        <div class="body-box">
          <div class="float-view">
            <float-bg></float-bg>
          </div>

          <!-- 第三行数据 -->
          <div class="content-box">
            <div class="top-left-view">
              <weather></weather>
              <six-top></six-top>
            </div>
            <pu-hang></pu-hang>
          </div>

          <!-- 第四行数据 -->
          <div class="bottom-box">
            <div class="b-left">
              <bottom-left></bottom-left>
            </div>
            <pu-dong></pu-dong>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"
import Weather from "./weather.vue"
import BottomLeft from "./bottomLeft.vue"
import FloatBg from "../components/floatBg.vue"
import SixTop from "./SixTop.vue"
import PuDong from "./PuDong.vue"
import PuHang from "./PuHang.vue"
export default {
  mixins: [drawMixin],
  components: {
    Weather,
    BottomLeft,
    FloatBg,
    SixTop,
    PuDong,
    PuHang,
  },
  data() {
    return {
      loading: true,
      decorationColor: ["#568aea", "#000000"],
      timer: null,
      time: "",
      date: "",
      week: "",
    }
  },
  mounted() {
    this.cancelLoading()
    this.dateFormat()
    this.timer = setInterval(() => {
      this.dateFormat()
    }, 1000)
  },
  beforeDestroy() {
    this.dataDestroy()
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    dataDestroy() {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }
    },
    dateShow() {},
    dateFormat() {
      let date = new Date()
      let year = date.getFullYear()
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()

      this.date = year + "年" + month + "月" + day + "日"
      this.time = hours + ":" + minutes + ":" + seconds
      this.week = "星期" + "日一二三四五六".charAt(date.getDay())
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
</style>
